<template>
	<view>
		<view class="top" v-if="data">
			<image src="../../../static/images/fvip.png" class="icon"></image>
			<view class="info">
				<view class="title" v-if="data.vip_type == 0">VIP月度专享会员</view>
				<view class="title" v-if="data.vip_type == 2">VIP年度专享会员</view>
				<view class="title" v-if="data.vip_type == 3">VIP年度超级专享会员</view>
				<view class="expire">您的会员将在{{data.vip_end|dateFormat}}到期</view>
			</view>
		</view>
		<view class="content_bg" v-if="setData">
			<view class="item line">
				<view class="left">
					<image class="icon" src="../../../static/images/member_vip2.png"></image>
					<view class="center">
						<view class="title">VIP月度会员</view>
						<view class="price">¥{{setData.month_vip_amount}}元</view>
					</view>
				</view>
				<view class="right" @click="payVip(0)">
					立即支付
				</view>
			</view><!-- item end -->
			<view class="item line">
				<view class="left">
					<image class="icon" src="../../../static/images/member_vip2.png"></image>
					<view class="center">
						<view class="title">VIP年度会员</view>
						<view class="price">¥{{setData.year_vip_amount}}元</view>
					</view>
				</view>
				<view class="right" @click="payVip(1)">
					立即支付
				</view>
			</view><!-- item end -->
			<view class="item">
				<view class="left">
					<image class="icon" src="../../../static/images/member_vip2.png"></image>
					<view class="center">
						<view class="title">VIP超级会员</view>
						<view class="price">¥{{setData.super_vip_amount}}元</view>
					</view>
				</view>
				<view class="right" @click="payVip(2)">
					立即支付
				</view>
			</view><!-- item end -->
		</view>
	</view>
</template>

<script>
	import {driverPayVip,vipInfo} from '@/api/user_common.js';
	import {baseSetting} from '@/api/common.js';
	export default {
		data() {
			return {
				operationing:false,
				data:undefined,
				setData:undefined 
			}
		},
		onLoad() {
			this.getVipInfo();
			this.getBaseSetting();
		},
		methods: {
			getVipInfo(){
				let that = this;
				vipInfo().then(res => {
					let data = res.data;
					if(data){
						that.data = data;
					}
				}).catch(err => {
					uni.hideLoading();
					return that.$util.Tips({
						title: err
					})
				});
			},
			getBaseSetting(){
				let that = this;
				baseSetting().then(res => {
					let data = res.data;
					if(data){
						that.setData = data;
					}
				}).catch(err => {
					uni.hideLoading();
					return that.$util.Tips({
						title: err
					})
				});
			},
			//支付会员
			payVip(type){
				if(this.operationing){
					return;
				}
				
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '确定充值会员？',
				    success: function (res) {
				        if (res.confirm) {
							that.operationing = true;
							uni.showLoading({
								title: '正在支付',
							})
							driverPayVip(type).then(res => {
								console.info(res.data.data)
								uni.hideLoading();
								let jsConfig = res.data.data;
								let appId = jsConfig.appId;
								let timeStamp = jsConfig.timeStamp;
								let nonceStr = jsConfig.nonceStr;
								let packageX = jsConfig.package;
								let signType = jsConfig.signType;
								let paySign = jsConfig.paySign;
								
								console.info(appId, "appId")
								console.info(timeStamp, "timeStamp")
								console.info(nonceStr, "nonceStr")
								console.info(packageX, "package")
								console.info(signType, "signType")
								
								uni.requestPayment({
									timeStamp: jsConfig.timestamp,
									nonceStr: jsConfig.nonceStr,
									package: jsConfig.package,
									signType: jsConfig.signType,
									paySign: jsConfig.paySign,
									provider: 'wxpay',
									orderInfo: jsConfig,
									success: function(res) {
										that.operationing = false;
										uni.showToast({
											icon:'success',
											title:'支付成功'
										})
										setTimeout(function(){
											uni.navigateBack();
										},1000);
									},
									fail: function(e) {
										that.operationing = false;
										console.info(e)
										uni.showToast({
											icon:'success',
											title:'支付失败'
										})
									},
									complete: function(res) {
										that.operationing = false;
										if (res.errMsg == 'requestPayment:cancel') return that.$util.Tips({
											title: that.$t(`取消支付`)
										});
									}
								})
							}).catch(err => {
								that.operationing = false;
								uni.hideLoading();
								return that.$util.Tips({
									title: err
								})
							});
				        }//end if
				    }//end success method
				});
			},
		},
		 //时间戳的处理    
		filters: {
			dateFormat: function(value) {
				var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var year = date.getFullYear();
				var month = ("0" + (date.getMonth() + 1)).slice(-2);
				var sdate = ("0" + date.getDate()).slice(-2);
				var hour = ("0" + date.getHours()).slice(-2);
				var minute = ("0" + date.getMinutes()).slice(-2);
				var second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result = year + "-" + month + "-" + sdate 
				// 返回
				return result;
			},
			formatDate: function(value) {
				var date = new Date(value);
				//date.setTime(value);
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				if(month < 10){
					month = "0" + month;
				}
				var hours = date.getHours();
				if (hours < 10)
					hours = "0" + hours;
				var minutes = date.getMinutes();
				if (minutes < 10)
					minutes = "0" + minutes;
				var time = year + '-' + month + "-" + date.getDate();
				return time;
			}
 
		},
	}
</script>

<style lang="scss">
	.top{
		display: flex;
		flex-direction: row;
		height: 280rpx;
		padding-top: 60rpx;
		background-color: #f9ce9e;
		.icon{
			margin-left: 40rpx;
			width: 84rpx;
			height:84rpx;
		}
		.info{
			margin-left: 30rpx;
			display: flex;
			flex-direction: column;
			.title{
				font-size: 40rpx;
				font-weight: bold;
				color: #765343;
			}
			.expire{
				font-size: 28rpx;
				color: #765343;
				margin-top: 10rpx;
			}
		}
		.btns{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-top: 20rpx;
			padding: 30rpx;
			background-color: white;
			.btn{
				width: 30%;
				height: 80rpx;
				font-size: 28rpx;
				text-align: center;
				line-height: 80rpx;
				background-color: goldenrod;
				color: white;
			}
		}
	}
	.content_bg{
		display: flex;
		flex-direction: column;
		background-color: white;
		margin-left: 30rpx;
		margin-right: 30rpx;
		z-index: 100;
		margin-top: -50rpx;
		border-radius: 10rpx;
		.line{
			border-bottom: 1rpx solid #f1f1f1;
		}
		.item{
			padding: 30rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.left{
				display: flex;
				flex-direction: row;
				align-items: center;
				.icon{
					width: 100rpx;
					height:100rpx;
				}
				.center{
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					.title{
						font-size: 30rpx;
						color: black;
						font-weight: bold;
					}
					.price{
						font-size: 28rpx;
						color: red;
						margin-top: 5rpx;
					}
				}
			}
			.right{
				color: white;
				background-color: #765343;
				height: 60rpx;
				width: 160rpx;
				border-radius: 30rpx;
				line-height: 60rpx;
				text-align: center;
			}
		}
	}
	.pay{
		margin: 20rpx 0rpx;
		padding: 15rpx 0rpx;
	}
</style>
